<template>
  <div id="TestResult">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>在线测试</el-breadcrumb-item>
      <el-breadcrumb-item>测试成绩</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <!-- 左边列表 -->
      <div class="list-L">
        <div class="select_Top">
          <!-- 下拉选框 -->
          <selector :valaue="value" @func="classNames"></selector>
        </div>
        <!-- 班级课程试卷列表 -->
        <div class="list_Bot">
          <el-table :data="tableData" style="width: 100%" @row-click="row">
            <el-table-column prop="courseName" width="120" label="课程"></el-table-column>
            <el-table-column prop="tpTitle" label="试卷"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="counter" label="提交人数"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="list-R">
        <el-radio v-model="radio" label="1">列表</el-radio>
        <el-radio v-model="radio" label="2">图表</el-radio>
        <el-button type="primary" size="mini" @click="port">导出</el-button>
        <el-button type="primary" size="mini" v-print="'#mains'">打印</el-button>
        <div id="mains" class="tab">
          <!-- 成绩列表 -->
          <div :class="radio==2?'Tab':''">
            <h1>{{tpTitles}}</h1>
            <el-table :data="studentAachievement" style="width: 100%">
              <el-table-column prop="index" label="#" type="index"></el-table-column>
              <el-table-column prop="stuName" label="姓名"></el-table-column>
              <el-table-column prop="testScore" label="成绩"></el-table-column>
              <el-table-column prop="submitTime" width="180" label="提交时间"></el-table-column>
              <el-table-column prop="userName" label="阅卷老师"></el-table-column>
            </el-table>
          </div>
          <div :class="radio==1?'Tab':''">
            <!-- 图表 -->
            <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
            <!-- <div id="main" :style="{width: '600px', height: '400px'}"></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import XLSX from "xlsx"
import selector from "@/components/selector/selector"; //班级组件
export default {
   components: {
    selector
  },
  data() {
    return {
      orgOptions:{},
      radio: "1", //单选按钮
      tableData: [], //试卷详情
      studentAachievement: [], //学生成绩详情
      value: "", //班级id
      className: [], //班级详情
      studentName: [], //学生名字
      Fraction: [], //分数
      tpTitles: "123" //试卷名
    };
  },
  methods: {
    // 导出图表
    export2Excel() {
      let _this = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../uilt/Export2Excel.js");
        const tHeader = ["姓名", "成绩", "提交时间", "阅卷老师"]; //自定义列名
        const filterVal = ["stuName", "testScore", "submitTime", "userName"]; //对应自述
        const list = _this.studentAachievement; //table数据
        const data = _this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "学生成绩"); //导出文件名称
      });
    },
    formatJson(filterVal, jsonData) {
      console.info(jsonData);
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    // 导出按钮
    port() {
      this.export2Excel();
    }, 
    //echarts图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let _this = this;
      // 绘制图表
     _this.orgOptions={
        title: {
          text: _this.tpTitles //表头标题
        },
        tooltip: {},
        xAxis: {
          data: _this.studentName, //学生名字
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 0 //-15度角倾斜显示
          }
        },
        yAxis: {},
        series: [
          {
            name: "成绩",
            type: "bar",
            data: _this.Fraction //分数
          }
        ]
      };
    },

    row(e) {
      // 根据测试任务编号获取学生的成绩
      let _this = this;
      _this.tpTitles = e.tpTitle;
      // console.log(_this.tpTitles);
      _this.$get("/api/TestResult/GetTestResultByTaskId", {
            taskId: e.taskId
        })
        .then(res => {
          //试卷详情
          _this.studentAachievement = res.data;
          // console.log(res.data);

          // 获取分数
          _this.Fraction = res.data.map(item => {
            return item.testScore;
          });
          // 获取学生姓名
          _this.studentName = res.data.map(item => {
            return item.stuName;
          });
          // console.log( _this.studentName,_this.Fraction)
          _this.drawLine(); //echarts图表
        });
    },
    classNames(e) {
      let _this = this;

      // 根据班级获取班级的测试信息
      _this.$get("/api/TestResult/GetTestPaperByClassId", {
            classId: e
         
        })
        .then(res => {
          _this.tableData = res.data;

          // console.log(res);
        });
    }
  },
  created() {
    let _this = this;
    // 获取所有课程信息
    _this.$get("/api/Class/GetAllClass").then(res => {
      _this.className = res.data;
      // console.log(_this.className);
    });
  }
};
</script>

<style scoped lang="less">
h1 {
  color: rgb(102, 102, 102);
  text-align: center;
}
.Tab {
  display: none;
}

.tab {
  padding: 20px;
}
li {
  list-style: none;
}
#TestResult {
  width: 100%;
  // border :1px solid;
  background: white;
}
// 内容容器
.container {
  width: 100%;
}
// 下拉选项框
/deep/.el-select {
  width: 100%;
}
// 左列表
.list-L {
  float: left;
  width: 38%;
  margin-right: 1%;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  // 下拉头部
  .select_Top {
    padding: 20px;
  }
  //列表内容
  .list_Bot {
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    width: 100%;
    /deep/.el-table__body {
      font-size: 14px;
    }
  }
}
// 右列表
.list-R {
  float: left;
  border-radius: 5px;
  width: 55%;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
// 媒体查询
@media screen and (max-width: 900px) {
  .container {
    width: 100%;
  }
  .list-L,
  .list-R {
    color: red;
    border-radius: 5px;
    width: 100%;
    margin-top: 10px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
@media screen and (max-width: 700px) {
  .container {
    width: 100%;
  }
  .list-L,
  .list-R {
    margin: 10px 0px;
    color: red;
    border-radius: 5px;
    width: 400px;
    margin-top: 10px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

// 图表
#main {
  text-align: center;
}
/deep/.container{
  margin-top: 20px
}
</style>
